import React, { useEffect, useState} from 'react';
import { QsPage } from './QsPage';
import { Jkcard } from './Jkcard';
import { MinePage } from './MinePage';
import {
  BrowserRouter as Router,
  Switch,
  Route,
  useHistory,
} from "react-router-dom";
import './Footbar.less';
import { IMGURL } from '../utils/common';

const windowHeight = window.innerHeight || document.documentElement.clientHeight;
export function Footbar() {
  const [sdkReady, setSdkReady] = useState(false);
	useEffect(() =>  {
		h5PanelSdk.sdkReady().then(() =>  setSdkReady(true));
	}, []);
  const footitem =[
    {
      ftindex:"0",
      fticonurl:IMGURL+"home.png",
      selected:IMGURL+"home-ed.png",
      fttext:"首页",
      fturl:"/Home"
    },
    {
      ftindex:"1",
      fticonurl:IMGURL+"qushi.png",
      selected:IMGURL+"qushi-ed.png",
      fttext:"趋势",
      fturl:"/QsPage"
    },
    {
      ftindex:"2",
      fticonurl:IMGURL+"mine.png",
      selected:IMGURL+"mine-ed.png",
      fttext:"我",
      fturl:"/MinePage"
    },
  ]
  const [curindex,setCurindex] = useState(0)
  const history = useHistory()
  let Contaierpage  = () => (
    <div>
    <Switch>
        <Route path="/Home" exact><Jkcard /></Route>
        <Route path="/QsPage" exact><QsPage /></Route>
        <Route path="/MinePage" exact><MinePage /></Route>
        <Route path="/"><Jkcard /></Route>
    </Switch>
    </div>
  );
  function Footitems(props){
    function changebar() {
      const footitem = props.value
      const url = props.value.fturl
      console.log('url',url);
      setCurindex(footitem.ftindex)
      console.log('curindex',curindex);
      history.replace(url)
    }
    return (
      <div className="footitem" key={props.value.ftindex} onClick={changebar}>
        <div className="fticon"><img src={curindex ==props.value.ftindex ? props.value.selected :props.value.fticonurl}/></div>
        <div className="fttext">{props.value.fttext}</div>
      </div>
    );
  }
  function FloatBtn(props) {
    // const footitem = props.footitem;
    const lkey =  footitem.map(function(item,index,array){
      return item.ftindex;
    });
    const listItems = footitem.map((item,index) =>
      <Footitems key={lkey[index]} value={item} />
    );
    return (
      <div className="page" style={{ minHeight: `${windowHeight}px` }}>
        {/* <DeviceDetailBtn /> */}
        <Contaierpage />
        <div className="footbar">
            <div className="footbar-con">
                {listItems}
            </div>
        </div>
      </div>
    );
  }
  return !sdkReady ? <div > loading...</div >  : (
    <FloatBtn footitem={footitem}/>
  );
}